<script lang="ts" setup>
import PrimTab from '@/components/PrimTab.vue'
import { TabMenuItem } from '@/types/public'
import CycleOrders from './cycleOrders.vue'
import ondemendOrders from './ondemendOrders.vue'
//定义菜单切换
const tabMenu = reactive<Array<TabMenuItem>>([
  {
    id: 'ondemendOrders',
    text: '按需订单'
  },
  {
    id: 'cycleOrders',
    text: '包周期订单'
  }
])
const currentMenu = ref('ondemendOrders')
const handleUpdateCurrentMenu = (str: string) => {
  currentMenu.value = str
}
</script>

<template>
  <div class="voucherCenter">
    <div class="rechage">
      <prim-tab :tab-menu="tabMenu" :current-menu="currentMenu" @handle-click="handleUpdateCurrentMenu"></prim-tab>
      <ondemendOrders v-if="currentMenu === 'ondemendOrders'" />
      <CycleOrders v-else />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.voucherCenter {
  .balances {
    background-color: #fff;
    padding: 22px 0;
    padding-left: 30px;

    div {
      display: inline-block;
      color: $text-color;
    }

    span {
      color: $main-color;
    }
  }

  .rechage {
    margin-top: 20px;
    background: #fff;
    padding: 20px 30px;

    :deep(.prim-tab) {
      font-weight: bold;
    }
  }
}
</style>
